<template>
  <div>
    <el-button-group style="margin-bottom: 20px">
      <el-button @click="cumulativeValue">累计值上限</el-button>
      <el-button @click="relativeValue">相对值上限</el-button>
    </el-button-group>
    <div>
      <el-form inline :model="form">
        <el-form-item label="采集设备名称">
          <el-select
            v-model="form.sensorId"
            size="medium"
            clearable
            placeholder="请选择传感器名称"
          >
            <el-option
              v-for="(item, index) in sensorList"
              :key="index"
              :label="item.value"
              :value="Number(item.key)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="监测体名称">
          <el-select
            v-model="form.monitorId"
            size="medium"
            clearable
            placeholder="选择监测体名称"
          >
            <el-option
              v-for="(item, index) in monitorList"
              :key="index"
              :label="item.value"
              :value="Number(item.key)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="info" size="medium" @click="search(1)"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="warning" size="medium" @click="set">设置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" stripe>
        <el-table-column
          label="采集设备名称"
          prop="sensorName"
          align="center"
        ></el-table-column>
        <el-table-column
          label="采集设备标识"
          prop="sensorNumber"
          align="center"
        ></el-table-column>
        <el-table-column
          label="监测体名称"
          prop="monitorName"
          align="center"
        ></el-table-column>
        <el-table-column
          label="阈值上限(mm)"
          prop="xdata"
          align="center"
        ></el-table-column>
        <el-table-column
          label="创建时间"
          prop="lastUpdateTime"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="modify(scope.row)"
              >修改</el-link
            >&nbsp;
            <el-link type="primary" :underline="false" @click="del(scope.row)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end">
        <el-col :span="10">
          <el-pagination
            background
            :current-page="pageData.currentPage"
            layout="total, prev, pager, next, jumper"
            :total="pageData.count"
            :page-size="pageData.pageSize"
            @current-change="handleCurrentChange"
            v-if="pageData.count && pageData.count != 0"
          >
          </el-pagination>
        </el-col>
      </el-row>
      <el-dialog title="增加阈值" :visible.sync="addThreshold" width="20%">
        <el-form
          ref="addForm"
          :model="addForm"
          :rules="rules"
          size="medium"
          label-position="left"
          label-width="100px"
        >
          <el-form-item label="采集设备名称">
            <el-select
              v-model="addForm.sensorObj"
              value-key="key"
              size="medium"
              clearable
              placeholder="请选择传感器名称"
              @change="sensorChange"
              style="display: flex"
            >
              <el-option
                v-for="(item, index) in sensorList"
                :key="index"
                :label="item.value"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="采集设备标识" v-show="addForm.sensorObj != ''">
            <el-input disabled v-model="sensorObj.sensorNum"></el-input>
          </el-form-item>
          <el-form-item label="监测体名称" v-show="addForm.sensorObj != ''">
            <el-input disabled v-model="sensorObj.monitorName"></el-input>
          </el-form-item>
          <el-form-item label="阈值上限(mm)" prop="xdata">
            <el-input
              placeholder="请输入阈值上限"
              v-model="addForm.xdata"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addThreshold = false">取 消</el-button>
          <el-button type="primary" @click="handle">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog
        title="修改阈值配置"
        :visible.sync="modifyThreshold"
        width="20%"
      >
        <el-form
          :ref="modifyForm"
          :model="modifyForm"
          :rules="rules"
          size="medium"
          label-position="left"
          label-width="100px"
        >
          <el-form-item label="采集设备名称">
            <el-input disabled v-model="modifyForm.sensorName"></el-input>
          </el-form-item>
          <el-form-item label="采集设备标识">
            <el-input disabled v-model="modifyForm.sensorNumber"></el-input>
          </el-form-item>
          <el-form-item label="监测体名称">
            <el-input disabled v-model="modifyForm.monitorName"></el-input>
          </el-form-item>
          <el-form-item label="阈值上限(mm)" prop="xdata">
            <el-input
              v-model="modifyForm.xdata"
              placeholder="请输入阈值上限"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="modifyThreshold = false">取 消</el-button>
          <el-button type="primary" @click="handle2">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import * as serviceApi from "../../../common/service.config";
Axios.defaults.withcredentials = true;

export default {
  name: "GroundService",
  data() {
    return {
      sensorList: null,
      monitorList: null,
      form: {
        sensorId: "",
        monitorId: "",
      },
      statisticType: "00",
      tableData: null,
      pageData: {
        currentPage: null,
        count: null,
        pageSize: null,
      },
      addThreshold: false,
      addForm: {
        sensorObj: "",
        xdata: "",
      },
      sensorObj: {
        sensorNum: "",
        monitorName: "",
      },
      modifyThreshold: false,
      modifyForm: {
        sensorName: "",
        sensorNumber: "",
        monitorName: "",
        xdata: "",
      },
      rules: {
        xdata: [
          {
            pattern: /^[0-9\s]+$/,
            message: "请输入正确的值！",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    queryWarningList(queryData) {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"page\\":{\\"currentPage\\":${queryData.currentPage},\\"pageSize\\":10},\\"moduleEnum\\":\\"01\\",\\"sensorId\\":\\"${queryData.sensorId}\\",\\"statisticType\\":\\"${queryData.statisticType}\\",\\"monitorId\\":\\"${queryData.monitorId}\\"}","serviceCode":"listWarningValueSetByPage","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.pageData = res.data.parameter.page;
        let list = res.data.parameter.list;
        for (let i = 0; i < list.length; i++) {
          list[i].lastUpdateTime = moment(list[i].lastUpdateTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
        this.tableData = list;
      });
    },
    cumulativeValue() {
      this.statisticType = "00";
      this.form = {
        sensorId: "",
        monitorId: "",
      };
      let queryData = {
        currentPage: "1",
        sensorId: "",
        monitorId: "",
        statisticType: "00",
      };
      this.queryWarningList(queryData);
    },
    relativeValue() {
      this.statisticType = "01";
      this.form = {
        sensorId: "",
        monitorId: "",
      };
      let queryData = {
        currentPage: "1",
        sensorId: "",
        monitorId: "",
        statisticType: "01",
      };
      this.queryWarningList(queryData);
    },
    search(currentPage) {
      let queryData = {
        currentPage: currentPage,
        sensorId: this.form.sensorId,
        monitorId: this.form.monitorId,
        statisticType: this.statisticType,
      };
      this.queryWarningList(queryData);
    },
    handleCurrentChange(val) {
      this.search(val);
    },
    sensorChange(value) {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"sensorName\\":\\"${value.value}\\"}","serviceCode":"findSensorById","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.sensorObj = res.data.parameter;
      });
    },
    set() {
      this.addThreshold = true;
      this.addForm = {
        sensorObj: "",
        xdata: "",
      };
    },
    handle() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          this.addThreshold = false;
          let queryData = {
            sensorNumber: this.sensorObj.sensorNum,
            monitorName: this.sensorObj.monitorName,
            xdata: this.addForm.xdata,
            sensorId: this.addForm.sensorObj.key,
          };
          Axios({
            url: serviceApi.KB_API,
            method: "post",
            data: `appMsg={"parameter":"{\\"moduleEnum\\":\\"01\\",\\"statisticType\\":\\"${this.statisticType}\\",\\"sensorId\\":\\"${queryData.sensorId}\\",\\"sensorNumber\\":\\"${queryData.sensorNumber}\\",\\"monitorName\\":\\"${queryData.monitorName}\\",\\"dataType\\":\\"\\",\\"pdata\\":\\"\\",\\"xdata\\":\\"${queryData.xdata}\\",\\"ydata\\":\\"\\",\\"hdata\\":\\"\\",\\"timeType\\":\\"\\"}","serviceCode":"addWarningValueSet","timestamp":"","uuid":""}`,
          }).then((res) => {
            let resultcode = res.data.resultcode;
            let message = res.data.parameter.message;
            if (resultcode == "0000") {
              this.$message({
                message: message,
                type: "success",
                duration: 1000,
                onClose: () => {
                  let queryData = {
                    currentPage: "1",
                    sensorId: "",
                    monitorId: "",
                    statisticType: this.statisticType,
                  };
                  this.queryWarningList(queryData);
                },
              });
            } else if (resultcode == "0001") {
              this.$message({
                message: message,
                type: "warning",
              });
            }
          });
        }
      });
    },
    modify(row) {
      this.modifyThreshold = true;
      this.modifyForm = Object.assign({}, row);
    },
    handle2() {
      this.$refs["modifyForm"].validate((valid) => {
        if (valid) {
          this.modifyThreshold = false;
          let queryData = {
            id: this.modifyForm.id,
            sensorId: this.modifyForm.sensorName,
            sensorNumber: this.modifyForm.sensorNumber,
            monitorName: this.modifyForm.monitorName,
            xdata: this.modifyForm.xdata,
          };
          Axios({
            url: serviceApi.KB_API,
            method: "post",
            data: `appMsg={"parameter":"{\\"id\\":\\"${queryData.id}\\",\\"sensorId\\":\\"${queryData.sensorId}\\",\\"sensorNumber\\":\\"${queryData.sensorNumber}\\",\\"monitorName\\":\\"${queryData.monitorName}\\",\\"dataType\\":\\"\\",\\"pdata\\":\\"\\",\\"xdata\\":\\"${queryData.xdata}\\",\\"ydata\\":\\"\\",\\"hdata\\":\\"\\",\\"timeType\\":\\"\\"}","serviceCode":"updateWarningValueSet","timestamp":"","uuid":""}`,
          }).then((res) => {
            let resultcode = res.data.resultcode;
            let message = res.data.parameter.message;
            if (resultcode == "0000") {
              this.$message({
                message: message,
                type: "success",
                duration: 1000,
                onClose: () => {
                  let queryData = {
                    currentPage: "1",
                    sensorId: "",
                    monitorId: "",
                    statisticType: this.statisticType,
                  };
                  this.queryWarningList(queryData);
                },
              });
            } else if (resultcode == "0001") {
              this.$message({
                message: message,
                type: "warning",
              });
            }
          });
        }
      });
    },
    del(row) {
      this.$confirm("您确定要删除该条数据吗？", "删除阈值配置", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Axios({
            url: serviceApi.KB_API,
            method: "post",
            data: `appMsg={"parameter":"{\\"warningvalueId\\":\\"${row.id}\\"}","serviceCode":"deleteWarningValueSet","timestamp":"","uuid":""}`,
          }).then((res) => {
            let message = res.data.parameter.message;
            this.$message({
              type: "success",
              message: message,
              duration: 1000,
              onClose: () => {
                let queryData = {
                  currentPage: "1",
                  sensorId: "",
                  monitorId: "",
                  statisticType: this.statisticType,
                };
                this.queryWarningList(queryData);
              },
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除!",
          });
        });
    },
  },
  created() {
    Axios({
      url: serviceApi.KB_API,
      method: "post",
      data: `appMsg={"parameter":"{\\"type\\":\\"2\\"}","serviceCode":"querySelect","timestamp":"","uuid":""}`,
    }).then((res) => {
      this.monitorList = res.data.parameter.list;
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"moduleEnum\\":\\"01\\"}","serviceCode":"sensorSelectByModuleEnum","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.sensorList = res.data.parameter.list;
        let queryData = {
          currentPage: "1",
          sensorId: "",
          monitorId: "",
          statisticType: "00",
        };
        this.queryWarningList(queryData);
      });
    });
  },
};
</script>